import React, { useState } from 'react'
import { Form, Input, Button, Radio, Uploader, DatetimePicker, Picker } from 'react-vant';
import {
  LeftOutlined
} from '@ant-design/icons';
export default function peoEdit() {
  const [form] = Form.useForm()
  const onFinish = values => {
    console.log(values)
  }
  return (
    <div>
      <div className="mythree_top">
        <p><LeftOutlined /></p>
        <h3>编辑资料</h3>
        <div></div>
      </div>

      <div className="edit">
        <Form
          form={form}
          onFinish={onFinish}
          footer={
            <div style={{ margin: '16px 16px 0' }}>
              <Button round nativeType='submit' type='primary' block>
                保存
              </Button>
            </div>
          }
        >
          <Form.Item
            rules={[{ required: true, message: '请填写用户名' }]}
            name='username'
            label='用户名'
          >
            <Input placeholder='请输入用户名'/>
          </Form.Item>
          <Form.Item
            name='uploader'
            label='头像'
            rules={[{ required: true, message: '请上传头像' }]}
          >
            <Uploader />
          </Form.Item>
          <Form.Item name='radio' label='性别' rules={[{ required: true, message: '请选择性别' }]}>
            <Radio.Group direction='horizontal'>
              <Radio name='r1'>男</Radio>
              <Radio name='r2'>女</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            isLink
            name='date'
            label='出生日期'
            trigger='onConfirm'
            onClick={(_, action) => {
              action.current?.open()
            }}
            rules={[{ required: true, message: '请选择出生日期' }]}
          >
            <DatetimePicker popup type='date'>
              {(val) => (val ? val.toDateString() : '请选择出生日期')}
            </DatetimePicker>
          </Form.Item>
          <Form.Item
            name='phone'
            label='绑定手机号'
          >
            <Input placeholder='请填写手机号码' />
          </Form.Item>
          <Form.Item
            name='email'
            label='绑定邮箱'
          >
            <Input placeholder='请填写邮箱地址' />
          </Form.Item>
          <Form.Item
            name='auth'
            label='作者简介'
          >
            <Input placeholder='请填写作者简介' />
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
